import {
  WechatFilled,
  Html5Filled,
  UserOutlined,
  QuestionCircleOutlined,
  BellOutlined,
} from '@ant-design/icons';
import { history, useLocation } from 'umi';
import { Layout, Menu, Dropdown, Space } from 'antd';
import styles from './index.less';
import { useState, useEffect, useRef } from 'react';
import { connect } from 'umi';
import BaseSide from '../base-side/index';
const leaveFn = () => {
  sessionStorage.clear();
  history.push('/login');
};
// 下拉框
const items = [
  {
    key: '1',
    label: '个人中心',
  },
  {
    key: '2',
    label: <span onClick={leaveFn}>退出登录</span>,
  },
];

const { Header } = Layout;

const BaseLayouts = ({ activeMenu, routes, dispatch, children }) => {
  const [routeList, setRouteList] = useState([]);
  // const [current, setCurrent] = useState('1');
  console.log('activeMenu', activeMenu);
  const onClick = (e) => {
    dispatch({
      // type 为 global/getRoutes 调用异步中的 getRoutes
      type: 'global/setMenus',
      payload: {
        //这里的payload是用于传入参数，将resolve作为一个函数参数传入
        currentMenu: e.key,
      },
    });
    // setCurrent(e.key);
  };
  const hasMounted = useRef(false);
  useEffect(() => {
    if (hasMounted.current) return;
    hasMounted.current = true;
    setRouteList(
      routes.map((v) => {
        return {
          label: v.name,
          key: v.id,
          icon: <Html5Filled />,
        };
      }),
    );
  }, []);
  return (
    <Layout className={styles.layout}>
      <Header className={styles.header}>
        <div className={styles.left_s}>
          <div className={styles.logoText}>
            <WechatFilled className={styles.logoIMG} />
            Umi-admin
          </div>
          <Menu
            onClick={onClick}
            selectedKeys={[activeMenu]}
            defaultSelectedKeys={[activeMenu]}
            mode="horizontal"
            items={routeList}
          />
        </div>
        {/* 右侧信息 */}
        <div className={styles.right_s}>
          <Dropdown
            menu={{ items }}
            // overlayClassName={styles.dropdown}
            placement="bottomLeft"
            trigger={['click']}
          >
            <div className={styles.user}>
              <UserOutlined />
              <span>管理员</span>
            </div>
          </Dropdown>
        </div>
      </Header>
      <div className={styles.silder}>
        <BaseSide current={activeMenu} children={children} />
      </div>
    </Layout>
  );
};
/* dva */
const mapStateToProps = (state) => {
  return {
    routes: state.global.routes,
    activeMenu: state.global.activeMenu,
  };
};
export default connect(mapStateToProps)(BaseLayouts);
